<template>
	<view>
		<view class="bj1">
			<span class="sj">{{time}}</span>
			<view class="rl">
				<uni-calendar class="uni-calendar--hook" :showMonth="false" />
			</view>
		</view>
		<view class="jinri">
			<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
			<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>今日投放</b></span>
			<view style="width: 200px;height: 35px;margin-left: 28px;margin-top: 5px;">
				<span style="color: #999999;"><b>7:30-8:30</b></span>
				<span style="color: #999999;margin-left: 50px;"><b>湿垃圾</b></span>
			</view>
			<view style="width: 200px;height: 35px;margin-left: 28px;margin-top: -3px;">
				<span style=""><b>7:30-8:30</b></span>
				<span style="margin-left: 50px;"><b>干垃圾</b></span>
			</view>
			
		</view>
		<view class="mingri">
			<view style="width: 4px;height: 17px;background-color: #2BCDDD;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
			<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>明日投放</b></span>
			<view style="width: 200px;height: 35px;margin-left: 28px;margin-top: 5px;">
				<span style="color: #999999;"><b>7:30-8:30</b></span>
				<span style="color: #999999;margin-left: 50px;"><b>湿垃圾</b></span>
			</view>
			<view style="width: 200px;height: 35px;margin-left: 28px;margin-top: -3px;">
				<span style=""><b>7:30-8:30</b></span>
				<span style="margin-left: 50px;"><b>干垃圾</b></span>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				time:'',
			}
		},
		onLoad() {
			this.fn()
		},
		methods: {
			fn () {
			      var timeObj = new Date()
			      var year = timeObj.getFullYear()
			      var mon = timeObj.getMonth() + 1
			      var day = timeObj.getDate()
			      var h = timeObj.getHours()
			      var m = timeObj.getMinutes()
			      var s = timeObj.getSeconds()
			      var week = timeObj.getDay()
			      switch (week) {
			        case 0: week = '日'
			          break
			        case 1: week = '一'
			          break
			        case 2: week = '二'
			          break
			        case 3: week = '三'
			          break
			        case 4: week = '四'
			          break
			        case 5: week = '五'
			          break
			        case 6: week = '六'
			          break
			      }
			      this.time = year + '年' + this.totwo(mon) + '月'
			    },
			totwo (n) {
			      if (n <= 9) {
			        n = '0' + n
			        return n
			      } else {
			        n = '' + n
			        return n
			      }
			    },
		}
	}
</script>

<style>
	.mingri{
		width: 335px;
		height: 100px;
		background-color: #FFFFFF;
		margin-top: 30px;
		margin-left: 20px;
		border-radius: 10px;
		box-shadow: 2px 2px 10px #909090;
	}
	.jinri{
		width: 335px;
		height: 100px;
		background-color: #FFFFFF;
		margin-top: 285px;
		margin-left: 20px;
		border-radius: 10px;
		box-shadow: 2px 2px 10px #909090;
		
	}
	.rl{
		width: 335px;
		height: 350px;
		background-color: #FFFFFF;
		border-radius: 15px;
		box-shadow: 2px 2px 10px #909090;
		margin-left: 20px;
		position: absolute;
		top: 100px;
	}
	.sj{
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
		    font-weight: 700;
		    font-size: 20px;
		    color: #FFFFFF;
		    margin-left: 15px;
			position: absolute;
			top: 20px;
	}
.bj1{
		width:100%;
		height:468rpx;
		background-image: url(../../static/indeimg/xia.png);
		
	}
</style>
